<template>
  <view class="contract-payment">

    <!-- 标签页 -->
    <view class="tabs">
      <view class="tab" :class="{ active: activeTab === 'contract' }" @click="switchTab('contract')">
        <text class="tab-text">合同管理</text>
      </view>
      <view class="tab" :class="{ active: activeTab === 'payment' }" @click="switchTab('payment')">
        <text class="tab-text">缴费管理</text>
      </view>
    </view>
    <!-- 合同列表 -->
    <view class="contract-list" v-if="activeTab === 'contract'">
      <view class="contract-item" v-for="(contract, index) in contractList" :key="index"
        @tap=goContractDetail(contract)>
        <view class="contract-header">
          <view class="contract-title-section">
            <view class="title-indicator"></view>
            <text class="contract-title">{{ contract.title }}</text>
          </view>
          <view class="status-section">
            <text class="status-text" :class="contract.statusClass">{{ contract.status == 0 ? '未签署' : contract.status ==
              1 ? '已签署' : '已缴费' }}</text>
          </view>
        </view>

        <view class="contract-info">
          <view class="info-item">
            <text class="info-icon">👤</text>
            <text class="info-label">签署人：</text>
            <text class="info-value">{{ contract.description }}</text>
          </view>
          <view class="info-item">
            <text class="info-icon">📄</text>
            <text class="info-label">签署方：</text>
            <text class="info-value">{{ contract.signingParty }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 缴费管理内容 -->
    <view class="payment-content" v-if="activeTab === 'payment'">
      <!-- 第一条押金缴费记录 -->
      <view class="payment-item" @tap="handlePayment('押金缴费', 0.1)">
        <view class="first-row">
          <text class="payment-name">押金缴费</text>
          <text class="payment-price">1</text>
        </view>
        <view class="second-row">
          <text class="payment-tag deposit-tag">押金</text>
          <text class="payment-date">2024年3月12日 14:12:21</text>
        </view>
      </view>

      <!-- 其他缴费记录列表 -->
      <view class="payment-item" v-for="(payment, index) in paymentList" :key="index">
        <view class="first-row">
          <text class="payment-name">{{ payment.name }}</text>
          <text class="payment-price">{{ payment.amount }}</text>
        </view>
        <view class="second-row">
          <text class="payment-tag fee-tag">{{ payment.tag }}</text>
          <text class="payment-date">{{ payment.date }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { apiGetContractList, apiGetPaymentList, apiGetPay, apiDefaultLogin } from '@/request/api'

export default {
  name: 'ContractPayment',
  data() {
    return {
      activeTab: 'contract',
      contractList: [
        {
          status: '待签署',
          statusClass: 'pending',
          signer: '严红',
          signingParty: '康养中心养老院-合肥蜀山片区'
        },
        {
          status: '已签署',
          statusClass: 'signed',
          signer: '严红',
          signingParty: '康养中心养老院-合肥蜀山片区'
        },
        {
          status: '已签署',
          statusClass: 'signed',
          signer: '严红',
          signingParty: '康养中心养老院-合肥蜀山片区'
        },
        {
          status: '已签署',
          statusClass: 'signed',
          signer: '严红',
          signingParty: '康养中心养老院-合肥蜀山片区'
        },
        {
          status: '已签署',
          statusClass: 'signed',
          signer: '严红',
          signingParty: '康养中心养老院-合肥蜀山片区'
        }
      ],
      paymentList: [
        {
          name: '202501~12月 养老院缴费',
          tag: '缴费',
          amount: '-12999',
          date: '2024年3月12日 14:12:21'
        },
        {
          name: '202501~12月 养老院缴费',
          tag: '缴费',
          amount: '-12999',
          date: '2024年3月12日 14:12:21'
        },
        {
          name: '202501~12月 养老院缴费',
          tag: '缴费',
          amount: '-12999',
          date: '2024年3月12日 14:12:21'
        },
        {
          name: '202501~12月 养老院缴费',
          tag: '缴费',
          amount: '-12999',
          date: '2024年3月12日 14:12:21'
        },
        {
          name: '202501~12月 养老院缴费',
          tag: '缴费',
          amount: '-12999',
          date: '2024年3月12日 14:12:21'
        },
        {
          name: '202501~12月 养老院缴费',
          tag: '缴费',
          amount: '-12999',
          date: '2024年3月12日 14:12:21'
        },
        {
          name: '202501~12月 养老院缴费',
          tag: '缴费',
          amount: '-12999',
          date: '2024年3月12日 14:12:21'
        },
        {
          name: '202501~12月 养老院缴费',
          tag: '缴费',
          amount: '-12999',
          date: '2024年3月12日 14:12:21'
        }
      ]
    }
  },
  async onLoad(query) {
    // 1. 已经拿到过 openid 就直接用
    let openid = uni.getStorageSync('openid');
    if (openid) {
      console.log('已有 openid:', openid);
      this.getContractList();
      return;
    }

    // 2. 从微信回调 url 里取 code
    const { code } = query;
    console.log("CODE", code)
    
    if (code) {
      // 检查这个 code 是否已经使用过（防止刷新页面重复使用）
      const usedCode = uni.getStorageSync('used_code');
      if (usedCode === code) {
        console.log('code 已使用过，跳过');
        this.getContractList();
        return;
      }
      
      // 立即标记 code 为已使用并清理 URL（防止重复调用）
      uni.setStorageSync('used_code', code);
      const cleanUrl = window.location.href.split('?')[0];
      window.history.replaceState(null, '', cleanUrl);
      
      try {
        const res = await apiDefaultLogin({ code });
        console.log('登录响应:', res);
        
        // 根据实际返回结构调整（可能是 res.data.openid 或 res.data.data.openid）
        openid = res.data.openid || res.data.data?.openid;
        
        if (openid) {
          uni.setStorageSync('openid', openid);
          // 成功后移除 used_code 标记
          uni.removeStorageSync('used_code');
          this.getContractList();
        } else {
          throw new Error('未获取到 openid');
        }
        
      } catch (error) {
        console.error('获取openid失败:', error);
        // 失败后移除 used_code 标记，允许重试
        uni.removeStorageSync('used_code');
        
        uni.showToast({
          title: '授权失败，请重新进入',
          icon: 'none',
          duration: 2000
        });
        
        // 2秒后重新发起授权
        setTimeout(() => {
          uni.removeStorageSync('openid');
          this.redirectToWechatAuth();
        }, 2000);
      }
    } else {
      // 3. 没有 code → 跳转微信授权
      this.redirectToWechatAuth();
    }
  },
  methods: {
    // 重定向到微信授权
    redirectToWechatAuth() {
      const currentUrl = window.location.href.split('?')[0].split('#')[0];
      const redirectUri = encodeURIComponent(currentUrl);
      const appId = 'wxa16dbe3c1b45d09d';
      const scope = 'snsapi_base'; // 静默授权
      
      const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=1#wechat_redirect`;
      console.log('跳转微信授权:', authUrl);
      window.location.replace(authUrl);
    },
    
    async getContractList() {
      const res = await apiGetContractList({
        uid: 1,
        page: 1,
        limit: 15
      })
      // this.contractList = res.data.data
    },
    async getPaymentList() {
      const res = await apiGetPaymentList({
        uid: 1,
        page: 1,
        limit: 15
      })
      this.paymentList = res.data.data

    },
    switchTab(tab) {
      this.activeTab = tab
      if (tab == 'contract') {
        this.getContractList()
      } else {
        this.getPaymentList()
      }

    },
    goContractDetail(contract) {
      let type = null;
      if (contract.status == '已签署') {
        type = 1
      } else {
        type = 0
      }
      const url = 'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf'
      uni.navigateTo({
        url: `/pages/pdf-view/index?type=${type}`
      })
    },
    // 处理支付
    async handlePayment(orderName, amount) {
      try {
        // 显示加载提示
        uni.showLoading({
          title: '发起支付中...'
        })

        // 调用支付接口获取支付参数
        const res = await apiGetPay({
          user_id: '11', // 用户ID，实际应从用户信息中获取
          openid: uni.getStorageSync('openid'),
          amount: amount, // 支付金额（单位：元）
          // type: 'wechat', // 支付类型
          // order_name: orderName, // 订单名称
        })
        // 隐藏加载提示
        uni.hideLoading()
        this.wxpay(res.data)

      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: '网络异常，请稍后再试',
          icon: 'none'
        })
        console.error('支付失败:', error)
      }
    },
    // 检测支付环境中的 WeixinJSBridge
    wxpay(data) {
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(data), false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(data));
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(data));
        }
      } else {
        this.onBridgeReady(data);
      }
    },

    onBridgeReady(data) {
      console.log('DATA',JSON.parse(data.pay_data.data.pay_info))
      let payInfo = JSON.parse(data.pay_data.data.pay_info)
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
        // 传入第一步后端接口返回的核心参数
        "appId": payInfo.appId, //公众号
        "timeStamp": payInfo.timeStamp, //时间戳
        "nonceStr": payInfo.nonceStr, //随机串
        "package": payInfo.package, //prepay_id
        "signType": payInfo.signType, //微信签名方式RSA
        "paySign": payInfo.paySign //微信签名
      },
        function (res) {
          // 支付成功
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
             uni.showToast({ title: '支付成功', icon: 'success' });
          }
          // 支付过程中用户取消
          if (res.err_msg == "get_brand_wcpay_request:cancel") {

          }
          // 支付失败
          if (res.err_msg == "get_brand_wcpay_request:fail") {

          }
          /**
          * 其它
          * 1、请检查预支付会话标识prepay_id是否已失效
          * 2、请求的appid与下单接口的appid是否一致
          * */
          if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {

          }
        });
    }
  }
}
</script>

<style scoped>
.contract-payment {
  /* min-height: 100vh; */
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

/* 页面标题 */
.header {
  background-color: #ffffff;
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid #f0f0f0;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #000000;
}

/* 标签页 */
.tabs {
  display: flex;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 30rpx 0;
  position: relative;
}

.tab-text {
  font-size: 32rpx;
  color: #666666;
}

.tab.active .tab-text {
  color: #FF6B6B;
  font-weight: bold;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #FF6B6B;
  border-radius: 2rpx;
}

/* 合同列表 */
.contract-list {
  height: 70vh;
  overflow: scroll;
  padding: 20rpx;
}

.contract-item {
  background-color: #ffffff;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.contract-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.contract-title-section {
  display: flex;
  align-items: center;
}

.title-indicator {
  width: 6rpx;
  height: 32rpx;
  background-color: #FF6B6B;
  border-radius: 3rpx;
  margin-right: 15rpx;
}

.contract-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #000000;
}

.status-text {
  font-size: 28rpx;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
}

.status-text.pending {
  color: #FF6B6B;
  background-color: #FFF0F0;
}

.status-text.signed {
  color: #999999;
  background-color: #F5F5F5;
}

/* 合同信息 */
.contract-info {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-icon {
  font-size: 28rpx;
  margin-right: 10rpx;
  color: #666666;
}

.info-label {
  font-size: 28rpx;
  color: #666666;
  margin-right: 10rpx;
}

.info-value {
  font-size: 28rpx;
  color: #000000;
  flex: 1;
}

/* 缴费管理内容 */
.payment-content {
  height: 70vh;
  overflow: scroll;
  margin: 20rpx;
  background-color: #ffffff;
  border-radius: 15rpx;
}

/* 缴费记录项 */
.payment-item {
  display: flex;
  flex-direction: column;
  padding: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.payment-item:last-child {
  border-bottom: none;
}

/* 第一行：标题和金额对齐 */
.first-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

/* 第二行：标签和日期对齐 */
.second-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.payment-name {
  font-size: 32rpx;
  color: #000000;
  font-weight: 500;
  line-height: 1.2;
}

.payment-price {
  font-size: 32rpx;
  font-weight: bold;
  color: #FF6B6B;
}

.payment-tag {
  font-size: 24rpx;
  border-radius: 20rpx;
  padding: 6rpx 16rpx;
  line-height: 1;
}

.deposit-tag {
  color: #FF6B6B;
  background-color: #FFF0F0;
}

.fee-tag {
  color: #2196F3;
  background-color: #E3F2FD;
}

.payment-date {
  font-size: 24rpx;
  color: #999999;
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  display: flex;
  padding: 20rpx 0;
  border-top: 1rpx solid #f0f0f0;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.nav-item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.nav-icon {
  font-size: 40rpx;
  color: #4D4D4D;
}

.nav-text {
  font-size: 24rpx;
  color: #4D4D4D;
}

.nav-item.active .nav-icon,
.nav-item.active .nav-text {
  color: #FF6B6B;
}
</style>